<template>
  <el-dropdown class="user panel-item" trigger="click">
    <div class="user-avatar">
      <el-avatar :size="30">超级管理员</el-avatar>
      <label>超级管理员</label>
      <el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="router.push('/home/center')">帐号信息</el-dropdown-item>
        <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import defaultConfig from '@/config'
import { AuthApi } from '@/api/auth'
import { useUserStore } from '@/stores/modules/user'
import { ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

// 退出登录
const logout = () => {
  ElMessageBox.confirm('您是否确认退出登录?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 1.执行退出登录接口
    await AuthApi.logout()

    // 2.清除 Token
    userStore.setToken('')

    // 3.重定向到登陆页
    router.replace(defaultConfig.LOGIN_URL)
    ElMessage.success('退出登录成功！')
  })
}
</script>

<style scoped lang="scss">
.user-bar {
  display: flex;
  align-items: center;
  height: 100%;
  .panel-item {
    padding: 0 10px;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    i {
      font-size: 16px;
    }
    &:hover {
      background: rgba(0, 0, 0, 0.1);
    }
  }
  .user-avatar {
    height: 49px;
    display: flex;
    align-items: center;
    label {
      display: inline-block;
      margin-left: 5px;
      font-size: 12px;
      cursor: pointer;
    }
  }
}
.msg-list {
  li {
    border-top: 1px solid #eee;
    a {
      display: flex;
      padding: 20px;
      &:hover {
        background: #ecf5ff;
      }
    }
  }
}
.msg-list__icon {
  width: 40px;
  margin-right: 15px;
}
.msg-list__main {
  flex: 1;
  h2 {
    font-size: 15px;
    font-weight: normal;
    color: #333;
  }
  p {
    font-size: 12px;
    color: #999;
    line-height: 1.8;
    margin-top: 5px;
  }
}
.msg-list__time {
  width: 100px;
  text-align: right;
  color: #999;
}
.dark {
  .msg-list__main {
    h2 {
      color: #d0d0d0;
    }
  }
  .msg-list {
    li {
      border-top: 1px solid #363636;
      a {
        &:hover {
          background: #383838;
        }
      }
    }
  }
}
</style>
